<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--[if IE
      ]><meta http-equiv="X-UA-Compatible" content="IE=edge"
    /><![endif]-->
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <!-- Place ../favicon.ico in the root directory -->
    <link rel="apple-touch-icon" href="../apple-touch-icon.png" />
    <link rel="icon" href="../favicon.ico" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:100,300,400,700,900"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Caveat"
      rel="stylesheet"
    />
    <title>Dashcore - Premium Software & Startup HTML</title>
    <!-- themeforest:css -->
    <link rel="stylesheet" href="../css/all.css" />
    <link rel="stylesheet" href="../css/aos.css" />
    <link rel="stylesheet" href="../css/cookieconsent.min.css" />
    <link rel="stylesheet" href="../css/magnific-popup.css" />
    <link rel="stylesheet" href="../css/odometer-theme-minimal.css" />
    <link rel="stylesheet" href="../css/prism-okaidia.css" />
    <link rel="stylesheet" href="../css/simplebar.css" />
    <link rel="stylesheet" href="../css/smart_wizard.css" />
    <link rel="stylesheet" href="../css/smart_wizard_theme_arrows.css" />
    <link rel="stylesheet" href="../css/smart_wizard_theme_circles.css" />
    <link rel="stylesheet" href="../css/smart_wizard_theme_dots.css" />
    <link rel="stylesheet" href="../css/swiper.css" />
    <link rel="stylesheet" href="../css/theme.css" />
    <link rel="stylesheet" href="../css/rtl.css" />
    <!-- endinject -->
  </head>

  <body>
    <!--[if lt IE 8]>
      <p class="browserupgrade">
        You are using an <strong>outdated</strong> browser. Please
        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
        your experience.
      </p>
    <![endif]-->
    <nav class="st-nav navbar main-nav navigation fixed-top">
      <div class="container">
        <ul class="st-nav-menu nav navbar-nav">
          <li class="st-nav-section nav-item">
            <a href="#main" class="navbar-brand"
              ><img
                src="../img/logo.png"
                alt="Dashcore"
                class="logo logo-sticky d-block d-md-none"
            /></a>
          </li>
          <li class="st-nav-section st-nav-primary nav-item">
            <a class="st-root-link item-products nav-link">Home </a
            ><a
              class="st-root-link item-pages st-has-dropdown nav-link"
              data-dropdown="pages"
              >Pages </a
            ><a
              class="st-root-link item-blocks st-has-dropdown nav-link"
              data-dropdown="blocks"
              >Blocks </a
            ><a
              class="st-root-link item-components st-has-dropdown nav-link"
              data-dropdown="components"
              >UI Components </a
            ><a
              class="st-root-link item-blog st-has-dropdown nav-link"
              data-dropdown="blog"
              >Blog </a
            ><a
              class="st-root-link item-shop st-has-dropdown nav-link"
              href="../shop/"
              data-dropdown="shop"
              >Shop</a
            >
          </li>
          <!-- Mobile Navigation -->
          <li class="st-nav-section st-nav-mobile nav-item">
            <button class="st-root-link navbar-toggler" type="button">
              <span class="icon-bar"></span> <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <div class="st-popup">
              <div class="st-popup-container">
                <a class="st-popup-close-button">Close</a>
                <div class="st-dropdown-content-group">
                  <h4 class="text-uppercase regular">Pages</h4>
                  <a class="regular text-primary" href="../about.html"
                    ><i class="far fa-building icon"></i> About </a
                  ><a class="regular text-success" href="../contact.html"
                    ><i class="far fa-envelope icon"></i> Contact </a
                  ><a class="regular text-warning" href="../pricing.html"
                    ><i class="fas fa-hand-holding-usd icon"></i> Pricing </a
                  ><a class="regular text-info" href="../faqs.html"
                    ><i class="far fa-question-circle icon"></i> FAQs</a
                  >
                </div>
                <div class="st-dropdown-content-group b-t bw-2">
                  <h4 class="text-uppercase regular">Components</h4>
                  <div class="row">
                    <div class="col mr-4">
                      <a target="_blank" href="../components/alert.html"
                        >Alerts</a
                      >
                      <a target="_blank" href="../components/badge.html"
                        >Badges</a
                      >
                      <a target="_blank" href="../components/button.html"
                        >Buttons</a
                      >
                      <a target="_blank" href="../components/color.html"
                        >Colors</a
                      >
                      <a target="_blank" href="../components/accordion.html"
                        >Accordion</a
                      >
                      <a target="_blank" href="../components/cookie-law.html"
                        >Cookielaw</a
                      >
                    </div>
                    <div class="col mr-4">
                      <a target="_blank" href="../components/overlay.html"
                        >Overlay</a
                      >
                      <a target="_blank" href="../components/progress.html"
                        >Progress</a
                      >
                      <a target="_blank" href="../components/lightbox.html"
                        >Lightbox</a
                      >
                      <a target="_blank" href="../components/tab.html">Tabs</a>
                      <a target="_blank" href="../components/tables.html"
                        >Tables</a
                      >
                      <a target="_blank" href="../components/typography.html"
                        >Typography</a
                      >
                    </div>
                  </div>
                </div>
                <div class="st-dropdown-content-group bg-light b-t">
                  <a target="_blank" href="../components/wizard.html"
                    >Wizard
                    <span class="badge badge-pill badge-primary">New</span></a
                  >
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="st-dropdown-root">
        <div class="st-dropdown-bg">
          <div class="st-alt-bg"></div>
        </div>
        <div class="st-dropdown-arrow"></div>
        <div class="st-dropdown-container">
          <div class="st-dropdown-section" data-dropdown="pages">
            <div class="st-dropdown-content">
              <div class="st-dropdown-content-group">
                <div class="mb-4">
                  <h3 class="text-darker light text-nowrap">
                    <span class="bold regular">Useful pages</span> you'll need
                  </h3>
                  <p class="text-secondary mt-0">Get a complete design stack</p>
                </div>
                <div class="row">
                  <div class="col">
                    <ul class="mr-4">
                      <li>
                        <h4 class="text-uppercase regular">Error</h4>
                      </li>
                      <li>
                        <a target="_blank" href="../403.html">403 Error</a>
                      </li>
                      <li>
                        <a target="_blank" href="../404.html">404 Error</a>
                      </li>
                      <li>
                        <a target="_blank" href="../405.html">405 Error</a>
                      </li>
                    </ul>
                  </div>
                  <div class="col">
                    <ul class="mr-4">
                      <li>
                        <h4 class="text-uppercase regular">User</h4>
                      </li>
                      <li><a target="_blank" href="../login.html">Login</a></li>
                      <li>
                        <a target="_blank" href="../register.html">Register</a>
                      </li>
                      <li>
                        <a target="_blank" href="../forgot.html">Forgot</a>
                      </li>
                    </ul>
                  </div>
                  <div class="col">
                    <ul>
                      <li>
                        <h4 class="text-uppercase regular">Extra</h4>
                      </li>
                      <li>
                        <a target="_blank" href="../pricing.html">Pricing</a>
                      </li>
                      <li><a target="_blank" href="../terms.html">Terms</a></li>
                      <li><a target="_blank" href="../faqs.html">FAQ</a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="st-dropdown-content-group">
                <a
                  class="dropdown-item bold"
                  target="_blank"
                  href="../about.html"
                  ><i class="far fa-building icon"></i> About </a
                ><a
                  class="dropdown-item bold"
                  target="_blank"
                  href="../contact.html"
                  ><i class="far fa-envelope icon"></i> Contact </a
                ><a
                  class="dropdown-item bold"
                  target="_blank"
                  href="../pricing.html"
                  ><i class="fas fa-hand-holding-usd icon"></i> Pricing</a
                >
              </div>
            </div>
          </div>
          <div class="st-dropdown-section" data-dropdown="blocks">
            <div class="st-dropdown-content">
              <div class="st-dropdown-content-group">
                <div class="row">
                  <div class="col mr-4">
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/call-to-action.html"
                      >Call to actions</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/contact.html"
                      >Contact</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/counter.html"
                      >Counters</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/faqs.html"
                      >FAQs</a
                    >
                  </div>
                  <div class="col mr-4">
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/footer.html"
                      >Footers</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/form.html"
                      >Forms</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/navbar.html"
                      >Navbar</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/navigation.html"
                      >Navigation</a
                    >
                  </div>
                  <div class="col">
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/pricing.html"
                      >Pricing</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/slider.html"
                      >Sliders</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/team.html"
                      >Team</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blocks/testimonial.html"
                      >Testimonials</a
                    >
                  </div>
                </div>
              </div>
              <div class="st-dropdown-content-group">
                <h3 class="link-title">
                  <i class="fas fa-long-arrow-alt-right icon"></i> Coming soon
                </h3>
                <div class="ml-5">
                  <span class="dropdown-item text-secondary">Dividers </span
                  ><span class="dropdown-item text-secondary">Gallery </span
                  ><span class="dropdown-item text-secondary">Screenshots</span>
                </div>
              </div>
            </div>
          </div>
          <div class="st-dropdown-section" data-dropdown="components">
            <div class="st-dropdown-content">
              <div class="st-dropdown-content-group">
                <a
                  class="dropdown-item"
                  target="_blank"
                  href="../components/color.html"
                >
                  <div class="media align-items-center mb-2">
                    <div
                      class="bg-dark text-contrast icon-md center-flex rounded-circle mr-3"
                    >
                      <i class="fas fa-palette"></i>
                    </div>
                    <div class="media-body">
                      <h3 class="link-title m-0">Colors</h3>
                      <p class="m-0 text-secondary">
                        Get to know DashCore color options
                      </p>
                    </div>
                  </div> </a
                ><a
                  class="dropdown-item"
                  target="_blank"
                  href="../components/accordion.html"
                >
                  <div class="media align-items-center mb-2">
                    <div
                      class="bg-success text-contrast icon-md center-flex rounded-circle mr-3"
                    >
                      <i class="fas fa-bars"></i>
                    </div>
                    <div class="media-body">
                      <h3 class="link-title m-0">Accordion</h3>
                      <p class="m-0 text-secondary">
                        Useful accordion elements
                      </p>
                    </div>
                  </div> </a
                ><a
                  class="dropdown-item"
                  target="_blank"
                  href="../components/cookie-law.html"
                >
                  <div class="media align-items-center mb-4">
                    <div
                      class="bg-info text-contrast icon-md center-flex rounded-circle mr-3"
                    >
                      <i class="fas fa-cookie-bite"></i>
                    </div>
                    <div class="media-body">
                      <h3 class="link-title m-0">CookieLaw</h3>
                      <p class="m-0 text-secondary">
                        Comply with the hideous EU Cookie Law
                      </p>
                    </div>
                  </div>
                </a>
                <h4 class="text-uppercase regular">Huge components list</h4>
                <div class="row">
                  <div class="col mr-4">
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../components/alert.html"
                      >Alerts</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../components/badge.html"
                      >Badges</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../components/button.html"
                      >Buttons</a
                    >
                  </div>
                  <div class="col mr-4">
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../components/overlay.html"
                      >Overlay</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../components/progress.html"
                      >Progress</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../components/lightbox.html"
                      >Lightbox</a
                    >
                  </div>
                  <div class="col mr-4">
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../components/tab.html"
                      >Tabs</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../components/tables.html"
                      >Tables</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../components/typography.html"
                      >Typography</a
                    >
                  </div>
                </div>
              </div>
              <div class="st-dropdown-content-group">
                <a
                  class="dropdown-item"
                  target="_blank"
                  href="../components/wizard.html"
                  >Wizard
                  <span class="badge badge-pill badge-primary">New</span></a
                >
                <span class="dropdown-item d-flex align-items-center text-muted"
                  >Timeline <i class="fas fa-ban ml-auto"></i
                ></span>
                <span class="dropdown-item d-flex align-items-center text-muted"
                  >Process <i class="fas fa-ban ml-auto"></i
                ></span>
              </div>
            </div>
          </div>
          <div class="st-dropdown-section" data-dropdown="blog">
            <div class="st-dropdown-content">
              <div class="st-dropdown-content-group">
                <div class="row">
                  <div class="col mr-4">
                    <h4 class="regular text-uppercase">Full width</h4>
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blog/blog-post.html"
                      >Single post</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blog/blog-grid.html"
                      >Posts Grid</a
                    >
                  </div>
                  <div class="col mr-4">
                    <h4 class="regular text-uppercase">Sidebar left</h4>
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blog/blog-post-sidebar-left.html"
                      >Single post</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blog/blog-grid-sidebar-left.html"
                      >Posts Grid</a
                    >
                  </div>
                  <div class="col mr-4">
                    <h4 class="regular text-uppercase">Sidebar right</h4>
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blog/blog-post-sidebar-right.html"
                      >Single post</a
                    >
                    <a
                      class="dropdown-item"
                      target="_blank"
                      href="../blog/blog-grid-sidebar-right.html"
                      >Posts Grid</a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="st-dropdown-section" data-dropdown="shop">
            <div class="st-dropdown-content">
              <div class="st-dropdown-content-group">
                <a
                  class="dropdown-item"
                  target="_blank"
                  href="../shop/home.html"
                >
                  <div class="media align-items-center">
                    <div
                      class="bg-success text-contrast icon-md center-flex rounded-circle mr-3"
                    >
                      <i class="fas fa-shopping-basket"></i>
                    </div>
                    <div class="media-body">
                      <h3 class="link-title m-0">Home</h3>
                      <p class="m-0 text-secondary">
                        Online store home with an outstanding UX
                      </p>
                    </div>
                  </div> </a
                ><a
                  class="dropdown-item"
                  target="_blank"
                  href="../shop/cart.html"
                >
                  <div class="media align-items-center">
                    <div
                      class="bg-info text-contrast icon-md center-flex rounded-circle mr-3"
                    >
                      <i class="fas fa-shopping-cart"></i>
                    </div>
                    <div class="media-body">
                      <h3 class="link-title m-0">Cart</h3>
                      <p class="m-0 text-secondary">
                        Online store shopping cart
                      </p>
                    </div>
                  </div>
                </a>
              </div>
              <div class="st-dropdown-content-group">
                <h3 class="link-title">
                  <i class="fas fa-money-check-alt icon"></i> Checkout
                </h3>
                <div class="ml-5">
                  <a
                    class="dropdown-item text-secondary"
                    target="_blank"
                    href="../shop/checkout-customer.html"
                    >Customer <i class="fas fa-angle-right ml-2"></i> </a
                  ><a
                    class="dropdown-item text-secondary"
                    target="_blank"
                    href="../shop/checkout-shipping.html"
                    >Shipping Information
                    <i class="fas fa-angle-right ml-2"></i> </a
                  ><a
                    class="dropdown-item text-secondary"
                    target="_blank"
                    href="../shop/checkout-payment.html"
                    >Payment Methods <i class="fas fa-angle-right ml-2"></i> </a
                  ><a
                    class="dropdown-item text-secondary"
                    target="_blank"
                    href="../shop/checkout-confirmation.html"
                    >Order Review <i class="fas fa-angle-right ml-2"></i
                  ></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <main>
      <header
        class="page header text-contrast overlay gradient gradient-purple-blue alpha-8 image-background cover"
        style="background-image: url('../img/bg/waves.jpg')"
      >
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <h1 class="display-4 text-contrast mb-4">Ligbox and Dialog</h1>
              <p class="lead text-contrast">
                Magnific Popup is a responsive lightbox & dialog script with
                focus on performance and providing best experience for user with
                any device
              </p>
            </div>
          </div>
        </div>
      </header>
      <!-- ./Lightbox - Single Image -->
      <section class="section b-b">
        <div class="container">
          <div class="section-heading text-center">
            <h2 id="examples">Single image lightbox</h2>
            <p class="lead">
              Three simple popups with different scaling settings.
            </p>
          </div>
          <div class="row">
            <div class="col-md-8 mx-auto text-center">
              <nav class="nav justify-content-center grid-of-images">
                <a
                  class="modal-popup image-popup-vertical-fit"
                  href="https://picsum.photos/800/600?image=1082"
                  title="Caption. Can be aligned to any side and contain any HTML."
                  data-type="image"
                  data-image='{"verticalFit": true}'
                  ><img
                    src="https://picsum.photos/75/75/?image=1082"
                    alt=""
                    class="img-responsive"
                  /> </a
                ><a
                  class="modal-popup image-popup-fit-width"
                  href="https://picsum.photos/800/600?image=1039"
                  title="This image fits only horizontally."
                  data-type="image"
                  data-image='{"verticalFit": false}'
                  ><img
                    src="https://picsum.photos/75/75/?image=1039"
                    alt=""
                    class="img-responsive"
                  /> </a
                ><a
                  class="modal-popup image-popup-no-margins"
                  href="https://picsum.photos/800/600?image=977"
                  data-type="image"
                  data-image='{"verticalFit": true}'
                  data-zoom="300"
                  ><img
                    src="https://picsum.photos/107/75/?image=977"
                    alt=""
                    class="img-responsive"
                /></a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <!-- ./Lightbox - Gallery -->
      <section class="section b-b">
        <div class="container">
          <div class="section-heading text-center">
            <h2 id="examples">Lightbox gallery</h2>
            <p class="lead">
              You may put any HTML content in each gallery item and mix content
              types. In this example lazy-loading of images is enabled for the
              next image based on move direction.
            </p>
          </div>
          <div class="row">
            <div class="col-md-8 mx-auto text-center">
              <div
                class="modal-popup popup-gallery grid-of-images"
                data-type="gallery"
                data-image='{"verticalFit": true}'
                data-zoom="300"
              >
                <a
                  href="https://picsum.photos/800/600/?image=997"
                  title="Some nice title to show"
                  ><img src="https://picsum.photos/75/75/?image=997" /></a
                ><a
                  href="https://picsum.photos/800/600/?image=977"
                  title="Some nice title to show"
                  ><img src="https://picsum.photos/75/75/?image=977" /></a
                ><a
                  href="https://picsum.photos/800/600/?image=976"
                  title="Some nice title to show"
                  ><img src="https://picsum.photos/75/75/?image=976" /></a
                ><a
                  href="https://picsum.photos/800/600/?image=1074"
                  title="Some nice title to show"
                  ><img src="https://picsum.photos/75/75/?image=1074" /></a
                ><a
                  href="https://picsum.photos/800/600/?image=874"
                  title="Some nice title to show"
                  ><img src="https://picsum.photos/75/75/?image=874" /></a
                ><a
                  href="https://picsum.photos/800/600/?image=937"
                  title="Some nice title to show"
                  ><img src="https://picsum.photos/75/75/?image=937" /></a
                ><a
                  href="https://picsum.photos/800/600/?image=1072"
                  title="Some nice title to show"
                  ><img src="https://picsum.photos/75/75/?image=1072"
                /></a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- ./Lightbox - Video -->
      <section class="section b-b">
        <div class="container">
          <div class="section-heading text-center">
            <h2 id="examples">Popup with video</h2>
            <p class="lead"></p>
          </div>
          <div class="row gap-y">
            <div class="col-12 col-sm-6 col-md-4">
              <div class="card shadow-box shadow-hover border-0">
                <a
                  href="https://www.youtube.com/watch?v=EykWcFEtFqo"
                  class="modal-popup mfp-iframe overlay gradient gradient-blue-purple alpha-3 p-6 image-background cover"
                  style="
                    background-image: url(https://picsum.photos/350/200/?random&gravity=south);
                  "
                  data-effect="mfp-fade"
                  data-type="iframe"
                >
                  <div class="content text-center">
                    <i
                      data-feather="play"
                      class="stroke-contrast"
                      with="36"
                      height="36"
                    ></i>
                  </div>
                </a>
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
              <div class="card shadow-box shadow-hover border-0">
                <a
                  href="https://www.youtube.com/watch?v=MXghcI8hcWU"
                  class="modal-popup mfp-iframe overlay gradient gradient-blue-purple alpha-3 p-6 image-background cover"
                  style="
                    background-image: url(https://picsum.photos/350/200/?random&gravity=east);
                  "
                  data-effect="mfp-fade"
                  data-type="iframe"
                >
                  <div class="content text-center">
                    <i
                      data-feather="play"
                      class="stroke-contrast"
                      with="36"
                      height="36"
                    ></i>
                  </div>
                </a>
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
              <div class="card shadow-box shadow-hover border-0">
                <a
                  href="https://www.youtube.com/watch?v=HLG_s9b2Uuw"
                  class="modal-popup mfp-iframe overlay gradient gradient-blue-purple alpha-3 p-6 image-background cover"
                  style="
                    background-image: url(https://picsum.photos/350/200/?random&gravity=north);
                  "
                  data-effect="mfp-fade"
                  data-type="iframe"
                >
                  <div class="content text-center">
                    <i
                      data-feather="play"
                      class="stroke-contrast"
                      with="36"
                      height="36"
                    ></i>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- ./Lightbox - Dialog -->
      <section class="section b-b">
        <div class="container">
          <div class="section-heading text-center">
            <h2 id="examples">Dialog with CSS animation</h2>
            <p class="lead">
              Animations are added with simple CSS transitions, you can make
              them look however you wish.
            </p>
          </div>
          <div class="row">
            <div class="col-md-10 mx-auto text-center">
              <p>Open dialog with animation</p>
              <nav class="nav justify-content-center">
                <a
                  class="nav-item nav-link modal-popup"
                  href="#modal-dialog"
                  data-effect="mfp-zoom-in"
                  ><span class="text-primary italic">zoom-in</span></a
                >
                <a
                  class="nav-item nav-link modal-popup"
                  href="#modal-dialog"
                  data-effect="mfp-newspaper"
                  ><span class="text-primary italic">newspaper</span></a
                >
                <a
                  class="nav-item nav-link modal-popup"
                  href="#modal-dialog"
                  data-effect="mfp-move-horizontal"
                  ><span class="text-primary italic">move-horizontal</span></a
                >
                <a
                  class="nav-item nav-link modal-popup"
                  href="#modal-dialog"
                  data-effect="mfp-move-from-top"
                  ><span class="text-primary italic">move-from-top</span></a
                >
                <a
                  class="nav-item nav-link modal-popup"
                  href="#modal-dialog"
                  data-effect="mfp-3d-unfold"
                  ><span class="text-primary italic">3d-unfold</span></a
                >
                <a
                  class="nav-item nav-link modal-popup"
                  href="#modal-dialog"
                  data-effect="mfp-zoom-out"
                  ><span class="text-primary italic">zoom-out</span></a
                >
              </nav>
              <!-- dialog itself, mfp-hide class is required to make dialog hidden -->
              <div
                id="modal-dialog"
                class="section mfp-with-anim mfp-hide popup-wrapper bg-contrast"
              >
                <div class="container">
                  <h2>Dialog example</h2>
                  <p>
                    This is dummy copy. It is not meant to be read. It has been
                    placed here solely to demonstrate the look and feel of
                    finished, typeset text. Only for show. He who searches for
                    meaning here will be sorely disappointed.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- ./Lightbox - Form -->
      <section class="section b-b">
        <div class="container">
          <div class="section-heading text-center">
            <h2 id="examples">Popup with Form</h2>
            <p class="lead">
              Entered data is not lost if you open and close the popup or if you
              go to another page and then press back browser button.
            </p>
          </div>
          <div class="row">
            <div class="col-md-10 mx-auto text-center">
              <a
                class="nav-item nav-link modal-popup"
                href="#modal-form"
                data-effect="mfp-zoom-in"
                data-focus="#signup_username"
                >Open form</a
              ><!-- dialog itself, mfp-hide class is required to make dialog hidden -->
              <div
                id="modal-form"
                class="container mfp-with-anim mfp-hide popup-wrapper bg-contrast"
              >
                <div class="row">
                  <div class="col-md-6 mx-auto">
                    <p class="alert alert-icon alert-primary mb-5">
                      <i class="icon fas fa-info-circle"></i>
                      <small
                        >The following example shows a modal form with auto
                        focused input</small
                      >
                    </p>
                    <form
                      action="srv/signup.php"
                      method="post"
                      class="form-signup"
                      name="form-signup"
                      data-response-message-animation="slide-in-up"
                    >
                      <div class="form-group">
                        <label for="signup_username" class="bold mb-0"
                          >User name</label
                        >
                        <input
                          type="text"
                          name="Signup[username]"
                          id="signup_username"
                          class="form-control"
                          placeholder="Enter your desired user name"
                          required
                        />
                      </div>
                      <div class="form-group">
                        <label for="signup_email" class="bold mb-0"
                          >Email address</label
                        >
                        <small
                          id="emailHelp"
                          class="form-text text-secondary mt-0 mb-2 italic"
                          ><i class="fas fa-info-circle icon"></i> We'll never
                          share your email with anyone else.</small
                        >
                        <input
                          type="email"
                          name="Signup[email]"
                          id="signup_email"
                          class="form-control"
                          placeholder="Valid email address"
                          required
                        />
                      </div>
                      <div class="form-group">
                        <label for="signup_password" class="bold mb-0"
                          >Password</label
                        >
                        <input
                          type="password"
                          name="Signup[password]"
                          id="signup_password"
                          class="form-control"
                          placeholder="Password"
                          required
                        />
                      </div>
                      <div class="form-group">
                        <button
                          id="signup-submit"
                          data-loading-text="Signing up..."
                          name="submit"
                          type="submit"
                          class="btn btn-rounded btn-primary mt-4"
                        >
                          Create account
                        </button>
                        <hr />
                        <p class="small">
                          By clicking this button you agree our
                          <a href="#" class="dotted">Privacy Policy</a>
                          &nbsp;&amp;&nbsp;
                          <a href="#" class="dotted">Terms Of Service</a>
                        </p>
                      </div>
                    </form>
                    <div class="response-message">
                      <i class="fas fa-envelope font-lg"></i>
                      <p class="font-md m-0">Check your email</p>
                      <p class="response">
                        We sent you an email with a link to get started. You’ll
                        be in your account in no time.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- ./Lightbox - Ajax -->
      <section class="section b-b">
        <div class="container">
          <div class="section-heading text-center">
            <h2 id="examples">Ajax Popup</h2>
            <p class="lead">
              You have full control of what is displayed in popup, align it to
              any side via CSS, enable or disable scroll on right side of window
              - whatever.
            </p>
          </div>
          <div class="row">
            <div class="col-md-10 mx-auto text-center">
              <a class="modal-popup" href="ajax-content.html" data-type="ajax"
                >Load content via ajax</a
              >
            </div>
          </div>
        </div>
      </section>
      <footer class="site-footer section text-center bg-light">
        <div class="divider-shape" style="top: -80px">
          <!-- mountains -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1000 100"
            preserveAspectRatio="none"
            style="
              transform: translateX(-50%) rotate3d(1, 0, 0, 180deg);
              height: 80px;
            "
          >
            <path
              class="shape-fill shape-fill-light"
              opacity="0.33"
              d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"
            />
            <path
              class="shape-fill shape-fill-light"
              opacity="0.66"
              d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"
            />
            <path
              class="shape-fill shape-fill-light"
              d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"
            />
          </svg>
        </div>
        <div class="container py-5">
          <div class="row align-items-center">
            <div class="col-md-6 text-center mx-auto">
              <img src="../img/logo.png" alt="" class="logo" />
              <h2 class="extra-bold text-dark mb-4">DashCore</h2>
              <p class="mt-2 mb-0 text-secondary small">
                © 2018
                <a
                  class="brand bold"
                  target="_blank"
                  href="https://5studios.net"
                  >5studios.net</a
                >. All Rights Reserved
              </p>
            </div>
          </div>
        </div>
      </footer>
    </main>
    <!-- themeforest:js -->
    <script src="../js/01.cookie-consent-util.js"></script>
    <script src="../js/02.1.cookie-consent-themes.js"></script>
    <script src="../js/02.2.cookie-consent-custom-css.js"></script>
    <script src="../js/02.3.cookie-consent-informational.js"></script>
    <script src="../js/02.4.cookie-consent-opt-out.js"></script>
    <script src="../js/02.5.cookie-consent-opt-in.js"></script>
    <script src="../js/02.6.cookie-consent-location.js"></script>
    <script src="../js/card.js"></script>
    <script src="../js/counterup2.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/noframework.waypoints.js"></script>
    <script src="../js/odometer.min.js"></script>
    <script src="../js/prism.js"></script>
    <script src="../js/simplebar.js"></script>
    <script src="../js/swiper.js"></script>
    <script src="../js/popper.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/jquery.easing.min.js"></script>
    <script src="../js/jquery.validate.js"></script>
    <script src="../js/jquery.smartWizard.js"></script>
    <script src="../js/plugins/jquery.animatebar.js"></script>
    <script src="../js/feather.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/aos.js"></script>
    <script src="../js/typed.js"></script>
    <script src="../js/jquery.magnific-popup.js"></script>
    <script src="../js/cookieconsent.min.js"></script>
    <script src="../js/common-script.js"></script>
    <script src="../js/forms.js"></script>
    <script src="../js/stripe-bubbles.js"></script>
    <script src="../js/stripe-menu.js"></script>
    <script src="../js/cc.js"></script>
    <script src="../js/pricing.js"></script>
    <script src="../js/shop.js"></script>
    <script src="../js/svg.js"></script>
    <script src="../js/site.js"></script>
    <script src="../js/03.demo.js"></script>
    <!-- endinject -->
  </body>
</html>
